<template>
  <div>
    <!-- 主框架 -->
    <el-card class="maincard">
      <h1>个人中心</h1>
      <el-row title="个人中心">
        <!-- 左侧列 -->
        <el-col :span="10" class="col">
          <el-card>
            <el-image class="image" src="src\assets\loginPic.jpg">
            </el-image>
          </el-card>
        </el-col>
        <!-- 右侧列 -->
        <el-col :span="14" class="col">
          <el-card class="card">
            <!-- 头像区域 -->
            <div>
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <div class="demo-collapse">
                <!-- 数据展示区域 -->
                <el-collapse v-model="activeName" accordion style="font-size: 18px; font-weight: bold; color: #333;">
                  <el-collapse-item title="工作信息" name="1">
                    <div>
                      工号: {{ getUsername }}<br>
                      职位：管理员<br>
                      单位：东软颐养中心
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="个人信息" name="2">
                    <div>
                      姓名：{{ Name }}<br>
                      年龄：{{ Age }}<br>
                      性别：{{ Gender }}<br>
                      身份证号：{{ Idnumber }}
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="工作内容概述" name="3">
                    <div>
                      作为颐养中心的系统管理员，您将负责维护和优化中心的信息系统，
                      确保所有技术设施运行顺畅，并为居民和工作人员提供必要的技术支持。
                      您将是保障中心信息技术安全和效率的关键人物。
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="联系方式" name="4">
                    <div>
                      电话：{{ Telephone }}<br>
                      邮箱：{{ Mail }}
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>

            </div>
            <div class="button">
              <el-button type="primary" @click="dialogVisible = true">修改</el-button>
            </div>


          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!-- 修改事件信息对话框 -->
    <div>
      <el-dialog v-model="dialogVisible" title="修改个人信息" width="500">

        <el-card>
          <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
            <el-form-item label="姓名：" prop="adminName">
              <el-input v-model="form.adminName" />
            </el-form-item>
            <el-form-item label="年龄：" prop="adminAge">
              <el-input v-model.number="form.adminAge" />
            </el-form-item>
            <el-form-item label="身份证号：" prop="adminIdnum">
              <el-input v-model="form.adminIdnum" />
            </el-form-item>
            <el-form-item label="电话：" prop="adminPhone">
              <el-input v-model="form.adminPhone" />
            </el-form-item>
            <el-form-item label="邮箱：" prop="adminMail">
              <el-input v-model="form.adminMail" />
            </el-form-item>
            <el-form-item>
              <el-button style=" margin-left: 85%; " type="primary" @click="onSubmit">提交</el-button>

            </el-form-item>
          </el-form>
        </el-card>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { computed } from 'vue';
import { useStore } from 'vuex';
import * as administer from '../../api/administer.js';
const store = useStore();
const getUsername = computed(() => store.getters.getUsername);
const activeName = ref('1');
const dialogVisible = ref(false)
const formRef = ref();
// 显示个人信息功能
const adminInfo = ref();
const Age = ref(0);
const Gender = ref<string>();
const Name = ref(0);
const Telephone = ref(0);
const Mail = ref(0);
const Idnumber = ref(0);
const Id = ref(0);


onMounted(async () => {
  try {
    const response = await administer.getAdminByUsername({ adminno: getUsername.value });
    adminInfo.value = response.data;
    Id.value = adminInfo.value.data[0].adminId;
    Age.value = adminInfo.value.data[0].adminAge;
    Gender.value = adminInfo.value.data[0].adminGender = 1 ? "男" : "女";
    Name.value = adminInfo.value.data[0].adminName;
    Idnumber.value = adminInfo.value.data[0].adminIdnum;
    Telephone.value = adminInfo.value.data[0].adminPhone ? adminInfo.value.data[0].adminPhone : "未填";
    Mail.value = adminInfo.value.data[0].adminMail ? adminInfo.value.data[0].adminMail : "未填";
  } catch (error) {
    console.error('获取管理员信息失败:', error);
  }
});
// 修改个人信息功能
const form = reactive({
  adminId: Id,
  adminNo: getUsername,
  adminName: Name,
  adminAge: Age,
  adminIdnum: Idnumber,
  adminPhone: Telephone,
  adminMail: Mail,
})
//表单验证
const rules = ref({
  adminName: [
    { required: true, message: '姓名是必填项', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度必须在2到10个字符之间', trigger: 'blur' }
  ],
  adminAge: [
    { required: true, message: '年龄是必填项', trigger: 'blur' },
    { min: 1, max: 180, type: 'number', message: '年龄必须是一个在1~180范围内的数字' }
  ],
  adminIdnum: [
    { required: true, message: '身份证号是必填项', trigger: 'blur' },
    { pattern: /\d{15}(\d{2}[0-9xX])?/, message: '请输入有效的身份证号码' }
  ],
  adminPhone: [
    { trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
  ],
  adminMail: [
    { trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址' }
  ]
});
const onSubmit = async () => {
  const valid = await formRef.value.validate();
  if (valid) {
    try {
      console.log(valid)
      const response = await administer.editAdminInfoAPI({
        ...form
      })
      ElMessage({
        message: '提交成功',
        type: 'success',
      })
      location.reload();
    }
    catch {
      console.log(valid)
      ElMessage({
        message: '提交失败',
        type: 'error',
      })
    }
  }
  else{
    ElMessage({
        message: '提交失败',
        type: 'error',
      })
  }
}
</script>
<style lang="less" scoped>
.maincard {
  width: 1000px;
}

.button {
  position: fixed;
  bottom: 450px;
  right: 200px;
}
.card {
  padding: 10px;
  height: 100%;
}
.col {
  padding: 10px;
}

.image {

  height: 400px;
  padding: 10px;
  src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
  object-fit: contain;
}
</style>